<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>天气</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 750px;
            margin: 0 auto;
            color: #fff;
        }
        .city{
            color: #000;
        }
        #for{
            display: flex;
        }
        #for > div{
            flex: 0 0 14.28%;
            text-align: center;
            background-color: black;
            padding: 10px 0 20px 0;
        }
        #for > div p{
            line-height: 50px;
        }
        #life{
            color: #000;
            display: flex;
            flex-wrap: wrap;
        }
        #life > div{
         flex: 0 0 33.333%;
            padding: 10px 10px;
        }
        #life > div p:nth-of-type(2){
            font-size: 13px;
        }
    </style>
</head>
<body>
<div class="container">
    <input type="text" id="ipt" placeholder="请输入城市">
    <div class="city">城市：<span id="city"></span></div>
    <div id="for"></div>
    <div id="life">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>
    </div>
</div>


<script>
    var city = '北京'
    function loadXMLDoc() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                var json = xmlhttp.responseText;
                json = JSON.parse(json);
                console.log(json);
                document.querySelector("#city").innerHTML= json.basic.city;

                for(let i = 0;i < json.daily_forecast.length;i++){

                    var ite = document.querySelector("#for");
                    var itt = document.createElement('div');
                    var p = document.createElement('p');
                    p.innerHTML = json.daily_forecast[i].date;
                    var big = document.createElement("p");
                   if(json.daily_forecast[i].cond.txt_d == "多云"){
                       big.style.backgroundImage="url(img/white30.png)";
                       big.style.backgroundPosition = "-80px 0px";
                       big.style.height = "27px";
                       big.style.width = "30px";
                       big.style.margin = "auto"
                   }if(json.daily_forecast[i].cond.txt_d == "晴"){
                        big.style.backgroundImage="url(img/white30.png)";
                        big.style.backgroundPosition = "0px 0px";
                        big.style.height = "27px";
                        big.style.width = "30px";
                        big.style.margin = "auto"
                    }if(json.daily_forecast[i].cond.txt_d == "阴"){
                        big.style.backgroundImage="url(img/white30.png)";
                        big.style.backgroundPosition = "-160px 0px";
                        big.style.height = "27px";
                        big.style.width = "30px";
                        big.style.margin = "auto"
                    }
                    if(json.daily_forecast[i].cond.txt_d == "小雨"){
                        big.style.backgroundImage="url(img/white30.png)";
                        big.style.backgroundPosition = "-560px 0px";
                        big.style.height = "27px";
                        big.style.width = "30px";
                        big.style.margin = "auto"
                    }
                    if(json.daily_forecast[i].cond.txt_d == "雷阵雨"){
                        big.style.backgroundImage="url(img/white30.png)";
                        big.style.backgroundPosition = "-318px 0px";
                        big.style.height = "27px";
                        big.style.width = "30px";
                        big.style.margin = "auto"
                    }
                    var p2 = document.createElement("p");
                    p2.innerHTML = json.daily_forecast[i].tmp.max + '/' + json.daily_forecast[i].tmp.min + '℃';

                    var span2 = document.createElement('span');
                    if(json.daily_forecast[i].cond.txt_d == json.daily_forecast[i].cond.txt_n){
                        span2.innerHTML = json.daily_forecast[i].cond.txt_d
                    }else{
                        span2.innerHTML = json.daily_forecast[i].cond.txt_d + ' 转 ' + json.daily_forecast[i].cond.txt_n;
                    }


                    itt.appendChild(p);
                    itt.appendChild(big)
                    itt.appendChild(p2);
                    itt.appendChild(span2);
                    ite.appendChild(itt);
                    console.log(json);

                }

                var one = document.querySelector(".one");
                var div4 = document.createElement("div");

                var p3 = document.createElement('p')
                var p4 = document.createElement('p')
                p3.innerHTML = json.suggestion.air.brf;
                p4.innerHTML = json.suggestion.air.txt;
                div4.appendChild(p3);
                div4.appendChild(p4);
                one.appendChild(div4);

                var two = document.querySelector(".two");
                var div6 = document.createElement("div");
                var div7 = document.createElement("div");
                var p5 = document.createElement('p')
                var p6 = document.createElement('p')
                p5.innerHTML = json.suggestion.comf.brf;
                p6.innerHTML = json.suggestion.comf.txt;
                div6.appendChild(p5);
                div6.appendChild(p6);
                two.appendChild(div6);

                var three = document.querySelector(".three");
                var div8 = document.createElement("div");
                var div9 = document.createElement("div");
                var p7 = document.createElement('p')
                var p8 = document.createElement('p')
                p7.innerHTML = json.suggestion.cw.brf;
                p8.innerHTML = json.suggestion.cw.txt;
                div8.appendChild(p7);
                div8.appendChild(p8);
                three.appendChild(div8);

                var four = document.querySelector(".four");
                var div10 = document.createElement("div");
                var div11 = document.createElement("div");
                var p9 = document.createElement('p')
                var p10 = document.createElement('p')
                p9.innerHTML = json.suggestion.drsg.brf;
                p10.innerHTML = json.suggestion.drsg.txt;
                div10.appendChild(p9);
                div10.appendChild(p10);
                four.appendChild(div10);

                var five = document.querySelector(".five");
                var div12 = document.createElement("div");
                var div13 = document.createElement("div");
                var p11 = document.createElement('p')
                var p12 = document.createElement('p')
                p11.innerHTML = json.suggestion.flu.brf;
                p12.innerHTML = json.suggestion.flu.txt;
                div12.appendChild(p11);
                div12.appendChild(p12);
                five.appendChild(div12);

            }
        }



        xmlhttp.open("GET","https://bird.ioliu.cn/weather?city=" + city,true);
        xmlhttp.send();
    }



    loadXMLDoc();

    document.querySelector("#ipt").addEventListener('change',function () {
        console.log(this.value);
        city = this.value;
        document.querySelector("#for").innerHTML=""
        document.querySelector(".one").innerHTML = ""
        document.querySelector(".two").innerHTML = ""
        document.querySelector(".three").innerHTML = ""
        document.querySelector(".four").innerHTML = ""
        document.querySelector(".five").innerHTML = ""
        loadXMLDoc();

    })


</script>
</body>
</html>